<template>
    <view class="page-box">
        <view class="header column">
            <image src="http://www.szxlyc.com/uploads/product/20241108/0337baa5df549081a9497015b706d496.png" mode="widthFix"></image>
            <text class="tt">你好，欢迎登录小朗优创！</text>
        </view>
        <view class="section">
            <view class="from-box">
                <view class="input-box row verCenter">
                    <text class="iconfont icon-a-tubiaochangyongsousuo4"></text>
                    <input type="text" placeholder="请填手机号关联的真实姓名" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.realname" />
                </view>
                <view class="input-box row verCenter" style="margin-bottom: 12rpx;">
                    <text class="iconfont icon-a-tubiaochangyongsousuo18"></text>
                    <input type="number" inputmode="tel" placeholder="请输入手机号码" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.mobile" />
                </view>
                <view class="tip" style="margin-bottom: 26rpx;">*未注册的手机号码将自动注册</view>
                <template v-if="is_pwd">
                    <!-- 登录密码 -->
                    <view class="input-box row verCenter">
                        <text class="iconfont icon-mima"></text>
                        <input type="password" placeholder="请输入登录密码" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.password" />
                    </view>
                    <!-- 图形验证码 -->
                    <view class="input-box row verCenter bothSide">
                        <view class="row verCenter">
                            <text class="iconfont icon-a-tubiaochangyongsousuo21"></text>
                            <input type="text" placeholder="请输入图形验证码" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.captcha_code" />
                        </view>
                        <image :src="captcha_code_url" mode="widthFix" class="pic-code" @click="captcha"></image>
                    </view>

                </template>
                <template v-else>
                    <!-- 图形验证码 -->
                    <view class="input-box row verCenter bothSide">
                        <view class="row verCenter">
                            <text class="iconfont icon-a-tubiaochangyongsousuo21"></text>
                            <input type="text" placeholder="请输入图形验证码" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.captcha_code" />
                        </view>
                        <image :src="captcha_code_url" mode="widthFix" class="pic-code" @click="captcha"></image>
                    </view>
                    <!-- 短信验证码 -->
                    <view class="input-box row verCenter bothSide" style="margin-bottom: 36rpx;">
                        <view class="row verCenter">
                            <text class="iconfont icon-a-tubiaochangyongsousuo3"></text>
                            <input type="number" placeholder="请输入短信验证码" placeholder-style="color: #6E767A;" class="uni-input" v-model="form.code" maxlength="4" />
                        </view>
                        <button class="get-code row verCenter rowCenter" :class={isDisabled:isDisabled} :disabled="isDisabled" @click="geyCode">{{ buttonText }}</button>
                    </view>
                </template>
            </view>
            <view class="btn row verCenter rowCenter" @click="submit" :class="{disabled:is_disabled}">登录</view>
            <view class="checkbox-box row verCenter">
                <checkbox-group @change="checkboxChange">
                    <checkbox value="1" style="transform:scale(0.6)"></checkbox>
                </checkbox-group>
                <text class="t1">我已阅读并同意</text>
                <navigator class="t2" hover-class="none" url="/pages/mine/agreement?type=1">《用户协议》</navigator>
            </view>
            <view class="login-type row rowCenter verCenter">
                <template v-if="is_pwd">
                    <text class="t1" @click="isPwdLogin">账号登录</text>
                </template>
                <template v-else>
                    <text class="t1" @click="isPwdLogin">密码登录</text>
                </template>
                <text class="line"></text>
                <navigator class="t2" url="/pages/mine/forgetPwd" hover-class="none">找回密码</navigator>
            </view>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';

    export default {
        data() {
            return {
                isDisabled: false,
                buttonText: '发送验证码',
                countdown: 60,
                is_pwd: false, //是否密码登录
                is_checked: false,
                captcha_code_url: '',
                captcha_code_key: '',
                is_disabled: false, //二要素验证
                form: {
                    realname: '', //真实姓名
                    mobile: '', //手机
                    password: '', //密码
                    code: '', //手机验证码
                    captcha_code: '', //图片验证码
                    invite_id: '', //邀请人
                    openId: '', //微信授权获取
                    name: '',
                    nickname: '',
                    avatar: '',
                    email: ''
                }
            };
        },
        onLoad(options) {
            console.log('携带的参数：' + JSON.stringify(options))
            this.form.invite_id = options.invite_id || ''; //邀请id
            //微信授权用户信息
            if (options.openId) {
                this.form.openId = options.openId || '';
                this.form.name = options.name || '';
                this.form.nickname = options.nickname || '';
                this.form.avatar = options.avatar || '';
                this.form.email = options.email || '';
            }
        },
        onShow() {
            this.captcha();
        },
        methods: {
            handleBlur(realname, mobile) {
                if (mobile && mobile.length === 11 && realname) {
                    this.twoElementsRecognition(realname, mobile);
                }
            },
            handleInput: debounce(function(realname, mobile) {
                if (realname && mobile) {
                    this.twoElementsRecognition(realname, mobile);
                }
            }, 500),
            /**
             * checkbox监听
             * @param {Object} e
             */
            checkboxChange(e) {
                var values = e.detail.value;
                if (values[0] == 1) {
                    this.is_checked = true;
                } else {
                    this.is_checked = false;
                }
            },
            /**
             * 刷新验证码
             */
            captcha() {
                this.request(API.captchaApp, 'GET', {}, true).then(res => {
                    this.captcha_code_key = res.key;
                    this.captcha_code_url = res.img;
                });
            },
            /**
             * 密码登录
             */
            isPwdLogin() {
                this.captcha();
                this.is_pwd = !this.is_pwd;
            },
            /**
             * 获取验证码
             */
            geyCode() {
                if (this.isDisabled) return;
                if (!this.form.mobile) {
                    uni.showToast({
                        title: '请输入手机号码',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.form.captcha_code) {
                    uni.showToast({
                        title: '请输入图形验证码',
                        icon: 'none'
                    });
                    return false;
                }

                //发送手机验证码
                this.sendMsgCode((res) => {
                    if (res.code === 0) {
                        //接口成功之后开始倒计时
                        this.isDisabled = true;
                        this.buttonText = `重新发送 ${this.countdown}秒`;

                        const countdownInterval = setInterval(() => {
                            this.countdown--;
                            this.buttonText = `重新发送 ${this.countdown}S`;

                            if (this.countdown === 0) {
                                clearInterval(countdownInterval);
                                this.isDisabled = false;
                                this.buttonText = '发送验证码';
                                this.countdown = 60; // 重置倒计时
                            }
                        }, 1000);
                    }
                });


            },
            /**
             * 发送手机验证码
             */
            sendMsgCode(callback) {
                this.request(API.sendMsgCode, 'POST', {
                    captcha_code: this.form.captcha_code,
                    mobile: this.form.mobile,
                    captcha_code_key: this.captcha_code_key,
                    type: 1
                }, true).then(res => {
                    typeof callback == 'function' && callback(res);
                    if (res.code === 0) {
                        uni.showToast({
                            title: res.data.content,
                            icon: 'success'
                        });
                    } else {
                        this.captcha();
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 二要素核验接口
             */
            twoElementsRecognition(name, mobile) {
                this.request(API.twoElementsRecognition, 'POST', { name: name, mobile: mobile }, true).then(res => {
                    if (res.code === 0) {
                        this.is_disabled = false;
                    } else {
                        this.is_disabled = true;
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            submit() {
                if (!this.form.realname) {
                    uni.showToast({
                        title: '请填手机号关联的真实姓名',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.form.mobile) {
                    uni.showToast({
                        title: '请输入手机号码',
                        icon: 'none'
                    });
                    return false;
                }

                if (this.is_pwd) {
                    //帐号密码登录  
                    if (!this.form.password) {
                        uni.showToast({
                            title: '请输入登录密码',
                            icon: 'none'
                        });
                        return false;
                    }
                    if (!this.form.captcha_code) {
                        uni.showToast({
                            title: '请输入图形验证码',
                            icon: 'none'
                        });
                        return false;
                    }
                } else {
                    //验证码登录
                    if (!this.form.captcha_code) {
                        uni.showToast({
                            title: '请输入图形验证码',
                            icon: 'none'
                        });
                        return false;
                    }
                    if (!this.form.code) {
                        uni.showToast({
                            title: '请输入短信验证码',
                            icon: 'none'
                        });
                        return false;
                    }
                }

                if (this.is_disabled) {
                    uni.showToast({
                        title: '请输入真实姓名和手机号',
                        icon: 'none'
                    });
                    return false;
                }

                if (!this.is_checked) {
                    uni.showToast({
                        title: '请确认已阅读并同意相关条款',
                        icon: 'none'
                    });
                    return false;
                }



                this.request(this.is_pwd ? API.login : API.registerAndLoginUser, 'POST', this.form, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '登录成功',
                            icon: 'success'
                        });

                        setTimeout(() => {
                            if (this.form.openId) {
                                uni.switchTab({
                                    url: '/pages/mine/index'
                                })
                            } else {
                                uni.switchTab({
                                    url: '/pages/index/index'
                                });
                            }
                        }, 2000)
                    } else {
                        this.captcha(); //刷新验证码
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/mine/login.scss';

    ::v-deep {
        uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
            background-color: #007aff !important;
            color: #fff !important;
        }
    }
</style>